<script lang="ts" setup>
import type { QuestionAnswer01ComponentMeta } from '@/definitions/type'
import { useCompStyleRender } from '@/hooks/useCompStyleRender'
import { usePrefix } from '@/hooks/usePrefix'
import { useDesignStore } from '@/stores'
import { computed } from 'vue'
import './RenderQuestionAnswer01.less'

defineOptions({
  name: 'RenderQuestionAnswer01',
})
const props = defineProps<{
  render: QuestionAnswer01ComponentMeta
}>()
const designStore = useDesignStore()
const platform = computed(() => designStore.config.platform)
const { prefix } = usePrefix()
const { style, wraperCls } = useCompStyleRender(props)
</script>

<template>
  <div :style="style" :class="[prefix('wraper'), prefix(wraperCls), prefix(platform)]">
    <div :class="prefix('main')">
      <div :class="prefix('list')">
        <!-- item for loop -->
        <a v-for="item of render.config.questionAnswers" :key="item.id" :class="prefix('item')" target="_blank" :href="item.url">
          <div :class="prefix('header')">
            <div :class="prefix('title')">{{ item.title }}</div>
            <i v-if="platform === 'pc'" class="iconfont icon-moban1_jiantou_xiangyou" :class="[prefix('icon')]" />
          </div>
          <div :class="prefix('content')">
            {{ item.desc }}
          </div>
        </a>
      </div>
      <a v-if="render.config.buttonUrl" target="_blank" :href="render.config.buttonUrl" :class="prefix('btn')">{{ render.config.buttonText }}</a>
    </div>
  </div>
</template>
